<!-- subpkg_consult/order_list/components/order-list.vue -->
<script setup>
	import { ref } from 'vue'
	import { orderListApi } from '@/services/consult'
	import { debounce } from '@/utils'
	const props = defineProps({
		type: {
			type: Number,
			default: 1,
		},
	})
	const current = ref(1)
	const pageSize = 5
	const orderList = ref([])
	const loadingStatus = ref('loading')
	const hasMore = ref(true)
	const getOrderList = async () => {
		loadingStatus.value = 'loading'
		const { code, data, message } = await orderListApi({
			type: props.type,
			current: current.value,
			pageSize,
		})
		if (code !== 10000) return uni.utils.toast(message)
		current.value++
		hasMore.value = current.value <= data.pageTotal
		orderList.value.push(...data.rows)
		loadingStatus.value = hasMore.value ? 'more' : 'noMore'
	}
	getOrderList()
	const onScrollToLower = debounce(() => {
		if (hasMore.value) getOrderList()
	})
	const refresherTriggered = ref(false)
	const onScrollRefresh = async () => {
		current.value = 1
		orderList.value = []
		refresherTriggered.value = true
		await getOrderList()
		refresherTriggered.value = false
	}
</script>

<template>
	<scroll-view
		refresher-enabled
		refresher-background="#f6f6f6"
		class="uni-scroll-view"
		scroll-y
		:refresher-triggered="refresherTriggered"
		@scrolltolower="onScrollToLower"
		@refresherrefresh="onScrollRefresh"
	>
		<view class="consult-list">
			<view
				class="consult-list-item"
				v-for="order in orderList"
				:key="order.id"
			>
				<view class="consult-header">
					<view class="label">
						<image class="doctor-avatar" :src="order.docInfo.avatar" />
						<text>{{ order.typeValue }}（自动分配医生）</text>
					</view>
					<text v-if="order.status === 1" class="status color-1">待支付</text>
					<text v-if="order.status === 2" class="status color-2">待接诊</text>
					<text v-if="order.status === 3" class="status color-2">咨询中</text>
					<text v-if="order.status === 4" class="status color-3">已完成</text>
					<text v-if="order.status === 5" class="status color-3">已取消</text>
				</view>

				<navigator
					class="consult-body"
					hover-class="none"
					:url="`/subpkg_consult/order_detail/index?id=${order.id}`"
				>
					<uni-list :border="false">
						<uni-list-item
							:border="false"
							title="病情描述"
							:right-text="order.illnessDesc"
						/>
						<uni-list-item
							:border="false"
							title="价格"
							:right-text="`¥${order.payment}`"
						/>
						<uni-list-item
							:border="false"
							title="创建时间"
							:right-text="order.createTime"
						/>
					</uni-list>
				</navigator>

				<view v-if="order.status === 1" class="consult-footer">
					<button class="uni-button minor">取消订单</button>
					<button class="uni-button">去支付</button>
				</view>
				<view v-if="order.status === 2" class="consult-footer">
					<button class="uni-button minor">取消订单</button>
					<button class="uni-button">继续咨询</button>
				</view>
				<view v-if="order.status === 3" class="consult-footer">
					<button class="uni-button">继续咨询</button>
				</view>
				<view v-if="order.status === 4" class="consult-footer">
					<button class="uni-button minor">问诊记录</button>
					<button v-if="order.evaluateId" class="uni-button minor">
						查看评价
					</button>
					<button v-else class="uni-button">去评价</button>
				</view>
				<view v-if="order.status === 5" class="consult-footer">
					<button class="uni-button minor">删除订单</button>
					<button class="uni-button">咨询其它医生</button>
				</view>
			</view>
			<!-- <view class="consult-list-item">
				<view class="consult-header">
					<view class="label">
						<image
							class="doctor-avatar"
							src="/static/uploads/doctor-avatar.jpg"
						/>
						<text>极速问诊（自动分配医生）</text>
					</view>
					<text class="status color-3">待支付</text>
				</view>
				<navigator
					class="consult-body"
					hover-class="none"
					url="/subpkg_consult/order_detail/index"
				>
					<uni-list :border="false">
						<uni-list-item
							:border="false"
							title="病情描述"
							right-text="腹痛腹泻  胃部有些痉挛"
						/>
						<uni-list-item :border="false" title="价格" right-text="¥ 39.00" />
						<uni-list-item
							:border="false"
							title="创建时间"
							right-text="2019-07-08  09:55:54"
						/>
					</uni-list>
				</navigator>
				<view class="consult-footer">
					<view class="uni-button more">
						<text class="label">更多</text>
						<uni-transition :show="true">
							<view class="list">
								<view class="list-item">查看处方</view>
								<view class="list-item">删除订单</view>
							</view>
						</uni-transition>
					</view>
					<button class="uni-button minor">取消订单</button>
					<button class="uni-button">继续支付</button>
				</view>
			</view>
			<view class="consult-list-item">
				<view class="consult-header">
					<view class="label">
						<image
							class="doctor-avatar"
							src="/static/uploads/doctor-avatar.jpg"
						/>
						<text>极速问诊（自动分配医生）</text>
					</view>
					<text class="status">待接诊</text>
				</view>
				<navigator
					class="consult-body"
					hover-class="none"
					url="/subpkg_consult/order_detail/index"
				>
					<uni-list :border="false">
						<uni-list-item
							:border="false"
							title="病情描述"
							right-text="腹痛腹泻  胃部有些痉挛"
						/>
						<uni-list-item :border="false" title="价格" right-text="¥ 39.00" />
						<uni-list-item
							:border="false"
							title="创建时间"
							right-text="2019-07-08  09:55:54"
						/>
					</uni-list>
				</navigator>
				<view class="consult-footer">
					<button class="uni-button minor">取消订单</button>
					<button class="uni-button">继续支付</button>
				</view>
			</view>
			<view class="consult-list-item">
				<view class="consult-header">
					<view class="label">
						<image
							class="doctor-avatar"
							src="/static/uploads/doctor-avatar.jpg"
						/>
						<text>极速问诊（自动分配医生）</text>
					</view>
					<text class="status color-2">已取消</text>
				</view>
				<navigator
					class="consult-body"
					hover-class="none"
					url="/subpkg_consult/order_detail/index"
				>
					<uni-list :border="false">
						<uni-list-item
							:border="false"
							title="病情描述"
							right-text="腹痛腹泻  胃部有些痉挛"
						/>
						<uni-list-item :border="false" title="价格" right-text="¥ 39.00" />
						<uni-list-item
							:border="false"
							title="创建时间"
							right-text="2019-07-08  09:55:54"
						/>
					</uni-list>
				</navigator>
				<view class="consult-footer">
					<button class="uni-button minor">取消订单</button>
					<button class="uni-button">继续支付</button>
				</view>
			</view> -->

			<!-- 加载状态 -->
			<uni-load-more
				:status="loadingStatus"
				color="#C3C3C5"
				:icon-size="16"
				:content-text="{
					contentdown: '上拉显示更多',
					contentrefresh: '数据正在加载中...',
					contentnomore: '没有更多数据了',
				}"
			/>
		</view>
	</scroll-view>
</template>

<style lang="scss">
	@import './styles.scss';
</style>
